<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>送给菜菜的情人节礼物</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            /*background-color: #CCC;*/
        }

        .layout {
            height: 200px;
            background-color: #00B7FF;
        }

        svg {
            max-width: 100vw;
            max-height: 100vh;
        }

        #content {

        }

        .animation {
            animation-duration: 2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        .center {
            animation-name: loading1;
        }

        .petal {
            stroke: transparent;
            fill: transparent;
        }

        @keyframes loading1 {
            0% {
                stroke-dashoffset: 19;
                stroke: #1A2042;
                fill: transparent;
            }
            65% {
                stroke-dashoffset: 0;
                stroke: #1A2042;
                fill: transparent;
            }
            100% {
                stroke-dashoffset: 0;
                stroke: #999;
                fill: #c97575;
            }
        }

        .petal-1 {
            animation-name: loading2;
            animation-delay: 2s;
        }

        @keyframes loading2 {
            0% {
                stroke-dashoffset: 53.3;
                stroke: #1A2042;
                fill: transparent;
            }
            65% {
                stroke-dashoffset: 0;
                stroke: #1A2042;
                fill: transparent;
            }
            100% {
                stroke-dashoffset: 0;
                stroke: #999;
                fill: #c76868;
            }
        }

        .petal-2 {
            animation-name: loading3;
            animation-delay: 4s;
        }

        @keyframes loading3 {
            0% {
                stroke-dashoffset: 75.4;
                stroke: #1A2042;
                fill: transparent;
            }
            65% {
                stroke-dashoffset: 0;
                stroke: #1A2042;
                fill: transparent;
            }
            100% {
                stroke-dashoffset: 0;
                stroke: #999;
                fill: #CB5050;
            }
        }

        .petal-3 {
            animation-name: loading4;
            animation-delay: 6s;
        }

        @keyframes loading4 {
            0% {
                stroke-dashoffset: 106.6;
                stroke: #1A2042;
                fill: transparent;
            }
            65% {
                stroke-dashoffset: 0;
                stroke: #1A2042;
                fill: transparent;
            }
            100% {
                stroke-dashoffset: 0;
                stroke: #999;
                fill: #CC4444;
            }
        }

        .petal-4 {
            animation-name: loading5;
            animation-delay: 8s;
        }

        @keyframes loading5 {
            0% {
                stroke-dashoffset: 150.8;
                stroke: #1A2042;
                fill: transparent;
            }
            65% {
                stroke-dashoffset: 0;
                stroke: #1A2042;
                fill: transparent;
            }
            100% {
                stroke-dashoffset: 0;
                stroke: #999;
                fill: #D03535;
            }
        }

        .petal-5 {
            animation-name: loading6;
            animation-delay: 10s;
        }

        @keyframes loading6 {
            0% {
                stroke-dashoffset: 213.3;
                stroke: #1A2042;
                fill: transparent;
            }
            65% {
                stroke-dashoffset: 0;
                stroke: #1A2042;
                fill: transparent;
            }
            100% {
                stroke-dashoffset: 0;
                stroke: #999;
                fill: #D02727;
            }
        }

        .line {
            stroke: transparent;
            fill: transparent;
        }

        .line-1 {
            animation-name: loading7;
            animation-delay: 12s;
        }

        @keyframes loading7 {
            0% {
                stroke: green;
                stroke-dashoffset: 70;
            }
            100% {
                stroke: green;
                stroke-dashoffset: 0;
            }
        }

        .line-2 {
            animation-name: loading8;
            animation-delay: 14s;
            animation-duration: 1s;
        }

        @keyframes loading8 {
            0% {
                stroke: green;
                stroke-dashoffset: 3;
            }
            100% {
                stroke: green;
                stroke-dashoffset: 0;
            }
        }

        .line-3 {
            animation-name: loading9;
            animation-delay: 15s;
        }

        @keyframes loading9 {
            0% {
                stroke: green;
                fill: transparent;
                stroke-dashoffset: 24;
            }
            50% {
                stroke: green;
                fill: transparent;
                stroke-dashoffset: 0;
            }
            100% {
                stroke: green;
                fill: green;
                stroke-dashoffset: 0;
            }
        }

        .line-4 {
            animation-name: loading10;
            animation-delay: 17s;
            animation-duration: 1s;
        }

        @keyframes loading10 {
            0% {
                stroke: green;
                stroke-dashoffset: 3;
            }
            100% {
                stroke: green;
                stroke-dashoffset: 0;
            }
        }

        .line-5 {
            animation-name: loading11;
            animation-delay: 18s;
        }

        @keyframes loading11 {
            0% {
                stroke: green;
                fill: transparent;
                stroke-dashoffset: 24;
            }
            50% {
                stroke: green;
                fill: transparent;
                stroke-dashoffset: 0;
            }
            100% {
                stroke: green;
                fill: green;
                stroke-dashoffset: 0;
            }
        }

        .title {
            animation-name: title;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-duration: 5s;
        }

        @keyframes title {
            0% {
                stroke-dashoffset: 100;
                stroke: red;
                fill: transparent;
            }
            70% {
                stroke-dashoffset: 0;
                stroke: red;
                fill: transparent;
            }
            100% {
                stroke-dashoffset: 0;
                stroke: red;
                fill: red;
            }
        }

    </style>
</head>
<body>
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">

    <g>
        <text font-size="12" stroke-width="0.3" stroke-dasharray="100 100" x="2" y="20" class="title animation">老婆节日快乐</text>
    </g>

    <g id="content" transform="translate(40 40)">
        <path stroke-dasharray="24 24" stroke-width="0.5" class="animation line line-5" d="M 13 32 C 11 31 7 33 5 35 C 8 35 12 34 13 32 Z" />
        <path stroke-dasharray="3 3" stroke-width="0.5" class="animation line line-4" d="M 15 33 C 14 32 14 32 13 32" />

        <path stroke-dasharray="24 24" stroke-width="0.5" class="animation line line-3" d="M 15 23 C 17 22 21 24 23 26 C 20 26 16 25 15 23 Z" />
        <path stroke-dasharray="3 3" stroke-width="0.5" class="animation line line-2" d="M 13 24 C 14 23 14 23 15 23" />

        <path stroke-dasharray="70 70" stroke-width="0.5" class="animation line line-1" d="M 0 0 C 18 22 16 41 15 56" />

        <path stroke-dasharray="213.3 213.3" stroke-width="0.04" class="petal petal-5 animation" d="M -12 0 A 1 1 0 0 1 0 -12 A 1 1 0 0 1 12 0 A 1 1 0 0 1 0 12 A 1 1 0 0 1 -12 0 Z" />
        <path stroke-dasharray="150.8 150.8" stroke-width="0.04" class="petal petal-4 animation" d="M -6 -6 A 1 1 0 0 1 6 -6 A 1 1 0 0 1 6 6 A 1 1 0 0 1 -6 6 A 1 1 0 0 1 -6 -6 Z" />
        <path stroke-dasharray="106.6 106.6" stroke-width="0.04" class="petal petal-3 animation" d="M 0 -6 A 1 1 0 0 1 6 0 A 1 1 0 0 1 0 6 A 1 1 0 0 1 -6 0 A 1 1 0 0 1 0 -6 Z" />
        <path stroke-dasharray="75.4 75.4" stroke-width="0.04" class="petal petal-2 animation" d="M -3 -3 A 1 1 0 0 1 3 -3 A 1 1 0 0 1 3 3 A 1 1 0 0 1 -3 3 A 1 1 0 0 1 -3 -3 Z" />
        <path stroke-dasharray="53.3 53.3" stroke-width="0.04" class="petal petal-1 animation" d="M 3 0 A 1 1 0 0 0 0 -3 A 1 1 0 0 0 -3 0 A 1 1 0 0 0 0 3 A 1 1 0 0 0 3 0 Z" />
        <path stroke-dasharray="19 19" stroke-width="0.04" class="petal animation center" d="M 3 0 A 1 1 0 0 0 -3 0 A 1 1 0 0 0 3 0 Z" />
    </g>
</svg>
</body>
<script>

</script>
</html>
